<template>
   <div>
     <section>
       <el-table
         :show-header="false"
         :data="tableData"
         :span-method="objectSpanMethod"
         border
         :cell-style="columnStyle"
         style="width: 100%; margin-top: 20px"
       >
         <!-- <el-table-column prop="id" label="ID" width="240"></el-table-column> -->
         <el-table-column width="180" prop="name"></el-table-column>
         <el-table-column prop="amount1"></el-table-column>
         <el-table-column width="180" prop="amount2"></el-table-column>
         <el-table-column prop="amount3"></el-table-column>
         <el-table-column width="180" prop="amount4"></el-table-column>
         <el-table-column prop="amount5"></el-table-column>
       </el-table>
     </section>
   </div>
</template>
<script>
export default {
  name: "mallMember-detail",
  data() {
    return {
    //请求回来的数据
      dataForm: {},
    };
  },
  computed: {
  //因为数据用到了dataform中的数据，所以写在了computed中
    tableData() {
      return [
        {
       //   id: this.dataForm.headImg,
          name: "建设单位",
          amount1: this.dataForm.cname,
          amount2: "项目名称",
          amount3: this.dataForm.hname,
            amount4: "土地用途",
          amount5: this.dataForm.lname
        },
        {
          
        //    id: this.dataForm.headImg,
          name: "土地权属",
          amount1: this.dataForm.oname,
          amount2: "房屋性质",
          amount3: this.dataForm.rname,
            amount4: "设计用途",
          amount5: this.dataForm.dname
        },
        {
        
  // id: this.dataForm.headImg,
          name: "土地号",
          amount1: this.dataForm.lnname,
          amount2: "房屋结构",
          amount3: this.dataForm.bsname,
            amount4: "取得方式",
          amount5: this.dataForm.gname
        },
        {
          
        // id: this.dataForm.headImg,
          name: "房屋坐落",
          amount1: this.dataForm.location,
          amount2: "分户图",
          amount3: this.dataForm.housedrawing,
            amount4: "土地用途",
          amount5: this.dataForm.housedrawing
        },
    
      ];
    }
  },
  mounted () {
      this.detail()
  },
  methods: {
    // 自定义列背景色
    columnStyle({ columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3||columnIndex == 5) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "background:#f3f6fc;";
      }else{
        return "background:#ffffff;";
      }
    },
    // 和并列
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    detail(){
          var the = this;
            // console.log("接收到的HID对象"+the.hid.hid)
            // console.log("接收到的数据为"+this.params)
            this.sa.ajax("/buildManager/detail",{
              'hid':1
            },
            function(data){
                the.dataForm = data.data;
            })
    }
  }
};
</script>


